<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>员工管理</title>
</head>

<body>
  <!-- 查询条件的部分 -->
  <div>
    <button id="btnDept">选择部门</button>
    <input type="text" id="txtQName" placeholder="姓名">
    <input type="text" id="txtQPhone" placeholder="电话">
    <select id="txtOrder">
      <option value="1">按照编号升序</option>
      <option value="2" selected>按照编号降序</option>
      <option value="3">按照部门名称升序</option>
      <option value="4">按照部门名称降序</option>
      <option value="5">分部门按照姓名排序</option>
    </select>
    <button id="btnQuery">查询</button>
    <button id="btnReset">重置</button>
    <button id="btnShowAdd">添加</button>
  </div>

  <!-- 数据呈现的部分 -->
  <table style="width: 100%;">
    <thead>
      <tr>
        <th>部门名称</th>
        <th>员工名称</th>
        <th>手机号码</th>
        <th>信息最后修改时间</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody id="tbData"></tbody>

  </table>

  <!-- 分页的部分 -->
  <nav>
    <a href="javascript:void(0)">第一页</a>
    <a href="javascript:void(0)">上一页</a>
    <span></span>
    <a href="javascript:void(0)">下一页</a>
    <a href="javascript:void(0)">最后一页</a>
  </nav>

  <!-- 部分选择的部分 -->
  <dialog id="deptDialog">
    <form method="dialog"></form>

    <div>
      <input type="text" id="txtDept" placeholder="部门名称">
      <button id="btnQueryDept">查询</button>
      <button id="btnCloseDept">关闭</button>
      <table>

        <thead>
          <tr>
            <th>部门名称</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody id="tbDept"></tbody>

      </table>
      <!-- 自己添加部门的分页 -->
    </div>

  </dialog>

  <!-- 添加的对话框 -->
  <dialog id="addDialog">
    <form method="dialog"></form>
    <div>
      <button id="btnADept">选择部门</button>
      <br>
      <input type="text" id="txtAName" placeholder="姓名">
      <br>
      <input type="text" id="txtAPhone" placeholder="电话">
      <br>
      <button id="btnAdd">添加</button>
      <button id="btnAClose">关闭</button>
    </div>
  </dialog>


  <!-- 修改的对话框 -->
  <dialog id="modifyDialog">
    <form method="dialog"></form>
    <div>
      <button id="btnMDept">选择部门</button>
      <br>
      <input type="text" id="txtMName" placeholder="姓名">
      <br>
      <input type="text" id="txtMPhone" placeholder="电话">
      <br>
      <button id="btnModify">保存</button>
      <button id="btnMClose">关闭</button>
    </div>
  </dialog>
  <!-- 熵增定律 -->

  <script src="js/employee.js" type="module"></script>

</body>

</html>